<template>
    <div class="Login">
      <div class="mask">
        <h1>宿舍管理系统</h1>
      </div>
      <div class="form">
        <h1>用户登录</h1>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="auto" class="demo-ruleForm">
        <el-form-item label="账号" prop="id">
            <el-input type="text" v-model="ruleForm.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item> 
        <div style="margin-top: 25px;text-align: center;" >
            <el-button type="primary" @click="submitForm('ruleForm')" :loading="logining" >登录</el-button>
        </div>
        </el-form>
      </div>
    </div>
</template>

<script>
export default {
    name:'Login',
    data() {
      return {
        ruleForm: {
          id: '',
          pass: '',
        },
        radio: 'admin',
        logining: false,
        rules: {
          id: [
            { required:true,message:'请输入用户名',trigger:'blur' }
          ],
          pass: [
            { required:true,message:'请输入密码',trigger:'blur' }
          ],
          
        }
      };
    },
    methods: {
      submitForm(formName) {
        if(this.ruleForm.id.search("admin") != -1)
          this.radio = "admin"
        else if(this.ruleForm.id.length == 7)
          this.radio = "homemaster"
        else if(this.ruleForm.id.length == 9)
          this.radio = "student"
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.logining = true;
            let _this = this;
            if(_this.radio == 'admin'){
              axios.get('http://localhost:8081/admin/login',{params:_this.ruleForm}).then(function (resp) {
                if(resp.data.code == -1){
                  alert('当前用户不存在')
                  _this.logining = false
                }else if(resp.data.code == -2)
                {
                  alert('密码错误')
                  _this.logining = false
                }else{
                  delete resp.data.data.password
                  localStorage.setItem('admin',JSON.stringify(resp.data.data));
                  localStorage.setItem('token',JSON.stringify(resp.data.token));
                  _this.$router.replace({path:'/admin'});
                }
              })
            }else if(_this.radio == 'homemaster'){
              axios.get('http://localhost:8081/homemaster/login',{params:_this.ruleForm}).then(function (resp) {
                if(resp.data.code == -1){
                  alert('当前用户不存在')
                  _this.logining = false
                }else if(resp.data.code == -2)
                {
                  alert('密码错误')
                  _this.logining = false
                }else{
                  delete resp.data.data.password
                  localStorage.setItem('homemaster',JSON.stringify(resp.data.data));
                  localStorage.setItem('token',JSON.stringify(resp.data.token));
                  _this.$router.replace({path:'/homemaster'});
                }
              })
            }else if(_this.radio == 'student'){
              axios.get('http://localhost:8081/student/login',{params:_this.ruleForm}).then(function (resp) {
                if(resp.data.code == -1){
                  alert('当前用户不存在')
                  _this.logining = false
                }else if(resp.data.code == -2)
                {
                  alert('密码错误')
                  _this.logining = false
                }else{
                  delete resp.data.data.password
                  localStorage.setItem('student',JSON.stringify(resp.data.data));
                  localStorage.setItem('token',JSON.stringify(resp.data.token));
                  _this.$router.replace({path:'/student'});
                }
              })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    }
}
</script>

<style scoped>
    .Login{
      background-image: url("../static/image/loginBg.jpg");
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      height: 100vh;
      position: relative;
    }
    .mask{
      position: absolute;
      height: 100vh;
      width: 100vw;
      background-color: #ffffff50;
      background-image: radial-gradient(
        100vh at center,
        #ffffff00,
        #ffffff13
      );
    }
    .mask h1{
      text-align: center;
      transform: translate(0,200%);
      color: #566e01;
      font-size: 50px;
    }
    .form{
      padding: 20px 30px;
      border-radius: 2%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 400px;
      background-color: #fff;
      z-index: 1;
    }
</style>